<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('运营数据') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('年份')" prop="queryYear">
        <DatePicker v-model="queryParams.queryYear" type="year" value-format="yyyy" :placeholder="$t('年份')" @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" tooltip-effect="darkTable" :data="dealIndicatorDataMainList" border>
      <el-table-column fixed="left" :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column fixed="left" :label="$t('项目名称')" align="center" prop="dealName" show-overflow-tooltip min-width="200">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
            class="link_a"
          >{{ scope.row.dealName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column fixed="left" :label="$t('负责人')" align="center" prop="nickName" show-overflow-tooltip min-width="100">
        <template slot-scope="scope">
          {{ scope.row.nickName }}
        </template>
      </el-table-column>
      <el-table-column fixed="left" :label="$t('报告期')" align="center" prop="time" show-overflow-tooltip min-width="70">
        <template slot-scope="scope">
          {{ scope.row.time }}
        </template>
      </el-table-column>
      <el-table-column fixed="left" :label="$t('达标')" align="center" prop="notUpToStandard" show-overflow-tooltip min-width="70">
        <template slot-scope="scope">
          {{ scope.row.complianceWithStandards }}
        </template>
      </el-table-column>
      <el-table-column fixed="left" :label="$t('未达标')" align="center" prop="complianceWithStandards" show-overflow-tooltip min-width="70">
        <template slot-scope="scope">
          {{ scope.row.notUpToStandard }}
        </template>
      </el-table-column>
      <el-table-column fixed="left" :label="$t('最新情况')" align="center" prop="score" min-width="100">
        <template slot-scope="scope">
          <span class="state" v-html="formatScore(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column fixed="left" :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="80">
        <template slot-scope="scope">
          <el-button type="text" class="el-icon-view" @click="viewHandler(scope.row)">{{ $t('查看') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :visible.sync="evaluateOpen" :close-on-click-modal="false" :fullscreen="showAll" :lock-scroll="true" :destroy-on-close="true" :custom-class="showAll ? 'dialogFormAll' : 'dialogForm'" append-to-body>
      <template v-slot:title>
        <div class="switch">
          <span class="el-dialog__title">{{ $t('运营数据') }}</span>
          <el-tooltip class="item" effect="dark" :content="$t('全屏开关')" placement="bottom">
            <el-image src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIABAMAAAAGVsnJAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABHRSTlMAHFWN8mpqAgAAAcpJREFUeNrt3UESQCAYgFFncAPGEZxA7n8mW4tMM1Ki9/aRzza/YQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoCfjHDHVW/+6ZY/Y6q1/nQACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggABfCBD9vv9kLREgJG5ac75AdIMpuQEevL4AAggggAACCCCAAAIIIIAAAggggAACCCCAAAII0M4GBRBAAAEEEEAAAQQQQAABBBBAAAEEaC1A6qhs7lHW0tcHAAAAAAAAAAAAAAAAAAAAAAAAAAA60/1Q1e7H6goggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAAC/DZA6ijrWiJAaOio7K0HyA1Q8w0LIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIMDFfIHcX221NB8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDyDs1OQyp4avauAAAAAElFTkSuQmCC" @click="showAll = !showAll" />
          </el-tooltip>
        </div>
      </template>
      <leaderEvaluate ref="leaderEvaluate" :default-evaluate="defaultEvaluate" />
    </el-dialog>
  </div>
</template>

<script>
import { listReport } from '@/api/deal/indicator/data/dealIndicatorDataMain'
import leaderEvaluate from '@/views/deal/report/leaderEvaluate.vue'
export default {
  components: {
    leaderEvaluate
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      formOpen: false,
      // 数据集
      dealIndicatorDataMainList: [],
      evaluateOpen: false,
      // 查询参数
      queryParams: {
        dealName: undefined,
        queryYear: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 全屏
      showAll: false,
      defaultEvaluate: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询储备项目列表 */
    getList() {
      this.loading = true
      listReport(this.queryParams).then(response => {
        this.dealIndicatorDataMainList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    formatScore(row) {
      console.log(row)
      var parse = JSON.parse(row.score)
      console.log(parse)
      var result = ''
      parse.forEach(item => {
        if (item === 3) {
          result += '<span style="color: #3DCC5D;font-size: 35px">●</span>'
        } else if (item === 2) {
          result += '<span style="color: #FDB029;font-size: 35px">●</span>'
        } else if (item === 1) {
          result += '<span style="color: #ff001e;font-size: 35px">●</span>'
        } else {
          result += '<span style="color: #9d9d9d;font-size: 35px">●</span>'
        }
      })
      return result
    },
    viewHandler(row) {
      this.defaultEvaluate = row.time
      this.evaluateOpen = true
      this.$nextTick(() => {
        this.$refs.leaderEvaluate.init(row)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.switch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 40px;
  margin-top: -2px;
}
/deep/ .el-image {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.dialogFormAll {
  width: 80%;
  height: 90%;
  overflow: hidden;
  margin-top: unset !important;
}
/deep/.state{
  span{
    font-size: 20px!important;
  }
}

/deep/ .el-dialog__body {
  overflow: auto;
}
</style>
